<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
{% load static %}
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>编辑关键字</title>
    <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/css/font-awesome.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/js/morris/morris-0.4.3.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/css/custom-styles.css' %}" rel="stylesheet"/>

</head>

<body>
<div id="wrapper">
    <!-- 头部bar -->
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/admin/index">POM - 自动化测试平台
            </a>
        </div>

        <ul class="nav navbar-top-links navbar-right color-white">
            <li>
                <a href="/login/" class=" pointer">退出登录</a>
            </li>
            <li><span class="mar-rignt-100">{{user}}</span></li>
        </ul>
    </nav>
    <!-- 头部bar end -->
    <!-- 左侧导航  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="/admin/index"><i class="fa fa-dashboard"></i> 系统概括</a>
                </li>
                <li>
                    <a href="/admin/project"><i class="fa fa-desktop"></i> 项目管理</a>
                </li>
                <li>
                    <a href="/admin/page"><i class="fa fa-bar-chart-o"></i> 页面管理</a>
                </li>
                <li>
                    <a href="/admin/element"><i class="fa fa-qrcode"></i> 页面元素</a>
                </li>

                <li>
                    <a class="active-menu" href="/admin/keyword"><i class="fa fa-table"></i> 关键字库</a>
                </li>
                <li>
                    <a href="/admin/testcase"><i class="fa fa-edit"></i> 测试用例 </a>
                </li>
                <li>
                    <a href="/admin/result"><i class="fa fa-fw fa-file"></i> 测试结果 </a>
                </li>
                <li>
                    <a href="/admin/loginConfig"><i class="fa fa-fw fa-building-o"></i> 登录配置 </a>
                </li>
                <li>
                    <a href="/admin/task"><i class="fa fa-fw fa-sitemap"></i> 任务管理 </a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- 左侧导航  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        <a href="/admin/keyword">关键字库</a> - 编辑关键字
                    </h1>
                </div>
            </div>
            <!--内容-->
            <!--内容-->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body width-p8" style="min-height:600px">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="firstname" class="col-sm-2 control-label">关键字名称</label>
                                    <div class="col-sm-10">
                                        <input id='keywordName' data-id={{ keywordId }} type="text"
                                               class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">所属项目</label>
                                    <div class="col-sm-10">
                                        <select id='projectSelect' class="form-control">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">关键字类型</label>
                                    <div class="col-sm-10">
                                        <div class="radio" style="display:inline-block; margin-right:20px">
                                            <label>
                                                <input type="radio" onClick="key_select(1)" name="keywordType"
                                                       id="optionsRadios1" value="1" checked="">系统
                                            </label>
                                        </div>
                                        <div class="radio" style="display:inline-block">
                                            <label>
                                                <input type="radio" onClick="key_select(2)" name="keywordType"
                                                       id="optionsRadios2" value="2">自定义
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <!--系统-->
                                <div id="css-xitong">
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label">包</label>
                                        <div class="col-sm-10">
                                            <input id='package' type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label">类</label>
                                        <div class="col-sm-10">
                                            <input id='clazz' type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label">方法</label>
                                        <div class="col-sm-10">
                                            <input id='method' type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label">参数</label>
                                        <div class="col-sm-10">
                                            <div class="table-responsive">
                                                <a class="pointer" data-toggle="modal" onclick="addParameter()">添加参数</a>
                                                <table class="table table-striped table-bordered table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>类型</th>
                                                        <th>名称</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="params">
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--系统end-->
                                <!--自定义-->
                                <div id="css-zidingyi" style=" display:none">
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label">步骤</label>
                                        <div class="col-sm-10">
                                            <div class="table-responsive">
                                                <a class="pointer" data-toggle="modal" onclick="gotoAddStep()">添加步骤</a>
                                                <table class="table table-striped table-bordered table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>关键字</th>
                                                        <th>参数</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="steps">
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <!--end自定义-->
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">备注信息</label>
                                    <div class="col-sm-10">
                                        <textarea id='remark' class="form-control" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label"></label>
                                    <div id='message' class="col-sm-10 js_message text-danger"></div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label"></label>
                                    <div class="col-sm-10">
                                        <button type="button" class="btn btn-primary mar-rignt-20"
                                                onclick="createKeyword()">保存
                                        </button>
                                        <button type="button" class="btn btn-default"
                                                onclick="javascript:window.location.href='/admin/keyword'">取消
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--内容-->

            <!--内容end-->
            <footer>
                <p class="text-center"></p>
            </footer>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->


<!--======-弹窗1 添加参数-->
<div class="modal fade" id="addCanshu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel1">
                    添加参数
                </h4>
            </div>
            <div class="modal-body">
                <!--内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input id='params-key' type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">参数类型</label>
                        <div class="col-sm-10">
                            <select id="params-type" class="form-control">
                                <option value="string">文本</option>
                                <option value="element">元素</option>
                            </select>
                        </div>
                    </div>
                </form>
                <!--内容-->

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveParams">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<!--======-end 添加参数-->
<!--======-弹窗2 添加步骤-->
<div class="modal fade" id="addBuzhou" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="cancelSaveStep()">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel2">
                    添加步骤
                </h4>
            </div>
            <div class="modal-body">
                <!--内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">选择操作</label>
                        <div class="col-sm-10">
                            <select id="step-keyword" class="form-control">
                            </select>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    设置参数：<br>
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                            <th>参数类型</th>
                            <th>值</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="keyword-value">
                    </table>
                </div>

                <!--内容-->

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="cancelSaveStep()">
                    取消
                </button>
                <button type="button" id="saveStep" class="btn btn-primary">
                    保存
                </button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<!--======-end 添加步骤-->


<div class="modal fade" id="setCanshu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="cancelSaveParameter()">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel3">
                    设置参数值
                </h4>
            </div>
            <div class="modal-body">
                <!--内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">值类型</label>
                        <div class="col-sm-10">
                            <div class="radio" style="display:inline-block; margin-right:20px">
                                <label>
                                    <input type="radio" name="valueType"
                                           id="optionsCanshu1" value="value" checked="">值
                                </label>
                            </div>
                            <div class="radio" style="display:inline-block">
                                <label>
                                    <input type="radio" name="valueType"
                                           id="optionsCanshu2" value="parameter">参数化
                                </label>
                            </div>
                        </div>
                    </div>
                    <!--==值===-->
                    <div id="css-canshu-zhi">
                        <!--文本-->
                        <div id='stringType' class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">参数值</label>
                            <div class="col-sm-10">
                                <input id='stringValue' type="text" class="form-control">
                            </div>
                        </div>
                        <!--元素-->
                        <div id='elementType' class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">参数值</label>
                            <div class="col-sm-5">
                                <select id="page" class="form-control">
                                </select>
                            </div>
                            <div class="col-sm-5">
                                <select id="elementValue" class="form-control">
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--==end 值===-->
                    <!--参数化-->
                    <div id="css-canshu-hua" style="display:none">
                        <!--文本 元素-->
                        <div id="parameterType" class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input id='parameterValue' type="text" class="form-control">
                            </div>
                        </div>
                    </div>

                </form>
                <!--内容-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="cancelSaveParameter()">
                    取消
                </button>
                <button type="button" id="saveParameter" class="btn btn-primary">
                    保存
                </button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

<script src="{% static 'assets/js/jquery-1.10.2.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.metisMenu.js' %}"></script>
<script src="{% static 'assets/js/morris/raphael-2.1.0.min.js' %}"></script>
<script src="{% static 'assets/js/morris/morris.js' %}"></script>
<script src="{% static 'assets/js/dataTables/jquery.dataTables.js' %}"></script>
<script src="{% static 'assets/js/dataTables/dataTables.bootstrap.js' %}"></script>
<script src="{% static 'assets/js/custom-scripts.js' %}"></script>
<script src="{% static 'assets/datetimepicker/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'assets/datetimepicker/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script src="{% static 'assets/datetimepicker/moment-with-locales(1).js' %}"></script>

<script>

</script>

<script>
    init();

    function init() {
        var keywordId = $("#keywordName").attr("data-id")
        $.ajax({
            url: '/api/v1/keyword/' + keywordId,
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    $("#keywordName").val(res.data.name)
                    $("#projectSelect").append("<option checked=\"checked\" value=" + res.data.projectId + ">" + res.data.projectName + "</option>");
                    initSelect()
                    var type = res.data.type;
                    $("#package").val(res.data.package);
                    $("#clazz").val(res.data.clazz);
                    $("#method").val(res.data.method);
                    $("#remark").val(res.data.remark);
                    $("input:radio[value='" + type + "']").prop('checked', true);
                    key_select(type);
                    if (type.toString() == "1") {
                        var trs = '';
                        $.each(res.data.params, function (k, v) {
                            var index = (k + 1);
                            trs += "<tr>";
                            trs += '<td name="index" class="center">' + index + "</td>";
                            trs += '<td class="center">' + (v.type == "string" ? "文本" : "元素") + "</td>";
                            trs += '<td class="center">' + v.key + "</td>";
                            trs += '<td class="center">';
                            trs += '<a class="pointer" data-toggle="modal" onclick="deleteParams(this)">删除</a>';
                            trs += '</td>';
                            trs += '<td class="data" style="display: none">' + JSON.stringify(v) + ' </td>';
                            trs += '</tr>'
                        });
                        $("#params").append(trs);
                    } else {
                        var tr = ''
                        $("#steps tr").remove();
                        var steps = res.data.steps;
                        for (var i = 0; i < steps.length; i++) {
                            var step = steps[i];
                            var data = step["data"];
                            tr += '<tr class="odd">';
                            tr += '<td class="center">' + (i + 1) + '</td>';
                            tr += '<td class="center">' + step["keywordName"] + '</td>';
                            tr += '<td class="center">';
                            for (var j = 0; j < step["viewData"].length; j++) {
                                var vd = step["viewData"][j];
                                tr += '<div class="parameter" data-view=\'' + JSON.stringify(vd) + '\'>';
                                if (vd["isParameter"]) {
                                    tr += (vd["key"] + ' = ' + '<em  style="color:red;font-style: normal;">参数化：</em>' + vd["value"])
                                } else {
                                    if (vd["type"] == "string") {
                                        tr += (vd["key"] + ' = ' + vd["value"])
                                    } else {
                                        tr += (vd["key"] + ' = ' + vd["elementName"])
                                    }
                                }
                                tr += "</div>";
                            }
                            tr += "</td>"
                            tr += '<td class="center">';
                            tr += '<a class="pointer" data-index="' + (i + 1) + '" data-toggle="modal" onclick="setStep(this)">设置</a> -';
                            tr += '<a class="pointer" data-toggle="modal" onclick="delStep(this)">删除</a>';
                            tr += '</td>';
                            tr += '<td class="data" data-view="" style="display: none">' + JSON.stringify(data) + '</td>';
                            tr += '</td>';
                        }
                        $("#steps").append(tr)
                    }
                } else {
                    window.location.href = '/admin/keyword'
                }
            }
        });

    }

    function initSelect() {
        var projectId = $("#projectSelect option:selected").val();
        $("#step-keyword").find("option").remove();
        $("#page").find("option").remove();
        $("#step-keyword").append("<option value='0'>选择关键字</option>");
        $("#page").append("<option value='0'>选择页面</option>");
        $.ajax({
            url: '/api/v1/project?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"pageSize": 9999999}),
            success: function (res) {
                for (var i = 0; i < res.data.projects.length; i++) {
                        $("#projectSelect").append('<option value="' + res.data.projects[i].id + '">' + res.data.projects[i].name + '</option>');
                }
            }
        });
        $.ajax({
            url: '/api/v1/keyword?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.keywords.length; i++) {
                        $("#step-keyword").append('<option value="' + res.data.keywords[i].id + '">' + res.data.keywords[i].name + '</option>');
                    }
                }
            }
        });
        $.ajax({
            url: '/api/v1/page?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId, "pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.pages.length; i++) {
                        $("#page").append('<option value="' + res.data.pages[i].id + '">' + res.data.pages[i].name + '</option>');
                    }
                }
            }
        });
    }

    $("#page").on('change', function () {
        var pageId = $("#page option:selected").val();
        $("#elementValue").find("option").remove();
        $("#elementValue").append("<option value='0'>选择元素</option>");
        $.ajax({
            url: '/api/v1/element?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"pageId": pageId, "pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.elements.length; i++) {
                        $("#elementValue").append('<option value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                    }
                }
            }
        });
    });

    $("#step-keyword").on('change', function () {
        $("#keyword-value").find("tr").remove();
        var keywordId = $("#step-keyword option:selected").val();//所属项目
        $.ajax({
            url: '/api/v1/keyword/' + keywordId,
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    var tr = '';
                    for (var i = 0; i < res.data.params.length; i++) {
                        var index = i + 1;
                        var type = res.data.params[i]["type"];
                        var type_ = type == "string" ? "文本" : type == "element" ? "元素" : "";
                        var data = res.data.params[i];
                        data["value"] = "";
                        var view = jQuery.extend({}, data);
                        view["type"] = type;
                        view["isParameter"] = false;
                        view["elementName"] = "";
                        view["pageId"] = "0";
                        tr += '<tr class="even">';
                        tr += '<td class="center">' + index + '</td>';
                        tr += '<td class="center">' + data["key"] + '</td>';
                        tr += '<td  class="center">' + type_ + '</td>';
                        tr += '<td class="center">' + data["value"] + '</td>';
                        tr += '<td class="center">';
                        tr += '<a class="pointer" data-index="' + index + '" data-value=\'' + JSON.stringify(view) + '\'+ data-toggle="modal" onclick="setValue(this)">设置参数值</a>';
                        tr += '</td>';
                        tr += '<td class = "data" style="display:none">';
                        tr += JSON.stringify(data);
                        tr += '</td>';
                        tr += '</tr>';
                    }
                    $("#keyword-value").append(tr);
                }
            }
        });
    });

    function addParameter() {
        $("#myModalLabel1").html("添加参数");
        $("#params-key").val("");
        $("#params-type").val("string");
        $("#saveParams").attr("onclick", 'addParams()');
        $("#addCanshu").modal("show");
    }

    function addParams() {
        var key = $("#params-key").val();
        var type = $("#params-type option:selected").val();
        var index = ($("#params").find("tr").length) + 1;
        var data = JSON.stringify({"type": type, "key": key});
        var tr = '<tr>';
        tr += "<td name='index' class='center'>" + index + "</td>";
        tr += ("<td class='center'>" + (type == 'string' ? '文本' : type == 'element' ? '元素' : '') + "</td>");
        tr += "<td class='center'>" + key + "</td>";
        tr += "<td class=\"center\">";
        tr += ' <a class="pointer" data-toggle="modal" onclick="deleteParams(this)">删除</a>';
        tr += '</td>';
        tr += '<td class="data" style="display: none">' + data + ' </td>';
        tr += '</tr>';
        $("#params").append(tr);
        $("#addCanshu").modal("hide")
    }

    function key_select(k) {
        if (k == 2) {
            $("#css-xitong").hide();
            $("#css-zidingyi").show();
        } else {
            $("#css-xitong").show();
            $("#css-zidingyi").hide();
        }
    }

    function canshu_select(k, type) {
        if (k == 2) {
            $("#css-canshu-zhi").hide();
            $("#css-canshu-hua").show();
        } else {
            $("#css-canshu-zhi").show();
            $("#css-canshu-hua").hide();
        }
        if (type == "string") {
            $("#elementType").hide();
            $("#stringType").show();
        } else {
            $("#stringType").hide();
            $("#elementType").show();
        }
    }

    function deleteParams(object) {
        $(object).parent().parent().remove();
        var trs = $("#params").find("tr");
        for (var i = 0; i < trs.length; i++) {
            $(trs[i]).find("td[name='index']").html(i + 1);
        }
    }

    function createKeyword() {
        var keywordId = $("#keywordName").attr("data-id");
        var name, projectId, package, clazz, method, params = [], remark, type, steps = [];
        projectId = $("#projectSelect option:selected").val();
        name = $("#keywordName").val();
        package = $("#package").val();
        clazz = $("#clazz").val();
        method = $("#method").val();
        ($("#params").find("tr").find("td.data")).each(function (i, v) {
            params.push(JSON.parse($(v).text().toString()));
        });
        remark = $("#remark").val();
        type = $('.radio input[name="keywordType"]:checked ').val();
        ($("#steps").find("tr").find("td.data")).each(function (i, v) {
            var data1 = JSON.parse($(v).text().toString());
            steps.push(data1);
        });
        var data_ = {
            "type": type,
            "name": name,
            "package": package,
            "clazz": clazz,
            "params": params,
            "method": method,
            "remark": remark,
            "steps": steps,
            "projectId": projectId,
        }
        $.ajax({
            url: '/api/v1/keyword/edit/' + keywordId,
            type: 'post',
            dataType: 'json',
            data: JSON.stringify(data_),
            success: function (res) {
                if (res.code == 200) {
                    $("#message").html("编辑成功,即将跳转到列表页");
                    setTimeout(function () {
                        window.location.href = '/admin/keyword';
                    }, 1000)
                } else {
                    $("#message").html(res.message);
                }
            }
        });
        return false;

    }

    function addStep(index) {
        var keywordId = $("#step-keyword option:selected").val();
        var keywordName = $("#step-keyword option:selected").text();
        var listIndex;
        if (index == null) {
            listIndex = ($("#steps").find("tr").length) + 1;
        } else {
            listIndex = index;
        }
        var values = [];
        var trs = $("#keyword-value").find("tr");
        var tds = '';
        tds += '<td class="center">' + listIndex + '</td>';
        tds += '<td class="center">' + keywordName + '</td>';
        tds += '<td class="center">';
        var text = '';
        for (var i = 0; i < trs.length; i++) {
            var td = $(trs[i]).find("td.data");
            var data = JSON.parse(td.text());
            values.push(data);
            var viewData = $(trs[i]).find("td a").attr("data-value");
            viewData = JSON.parse(viewData);
            text += "<div class='parameter' data-view='" + JSON.stringify(viewData) + "' data='" + JSON.stringify(data) + "'>" + viewData["key"];
            text += " = ";
            if (viewData["isParameter"]) {
                text += ('<em  style="color:red;font-style: normal;">参数化：</em>' + viewData["value"]);
            } else {
                if (viewData["type"] == "string") {
                    text += viewData["value"];
                } else {
                    text += viewData["elementName"];
                }
            }
            text += "</div>"
        }
        var data = {"keywordId": keywordId, "values": values};
        tds += text;
        tds += '</td>';
        tds += '<td class="center">';
        tds += '<a class="pointer" data-index="' + listIndex + '" data-toggle="modal" onclick="setStep(this)">设置</a> -';
        tds += '<a class="pointer" data-toggle="modal" onclick="delStep(this)">删除</a>';
        tds += '</td>';
        tds += '<td class="data" data-view="" style="display: none">' + JSON.stringify(data) + '</td>';
        tds += '</tr>';
        if (index == null) {
            var tr = '<tr class="odd">'
            tr += tds;
            tr += "</tr>"
            $("#steps").append(tr);
        } else {
            tr = $("#steps tr td a[data-index='" + index + "']").parent().parent();
            tr.find("td").remove();
            tr.append(tds);
        }
        $("#addCanshu").modal("hide");
        $("#addBuzhou").modal("hide");
        $(".modal-backdrop.in").remove();
        $(".modal-backdrop.fade.in").remove();
    }

    function setStep(index) {
        index = $(index).attr("data-index");
        $("#saveStep").attr("onclick", "addStep(" + index + ")");
        $("#myModalLabel2").html("编辑步骤");
        var tr = $("#steps tr td a[data-index='" + index + "']").parent().parent();
        var keywordId = JSON.parse((tr.find("td.data").text()))["keywordId"];
        $("#step-keyword").val(keywordId);
        var divs = tr.find("td div.parameter");
        var tr = '';
        for (var i = 0; i < divs.length; i++) {
            var index = i + 1;
            var view = JSON.parse($(divs[i]).attr("data-view"));
            var type = view["type"];
            tr += '<tr class="even">';
            tr += '<td class="center">' + index + '</td>';
            tr += '<td class="center">' + view["key"] + '</td>';
            var type_ = type == "string" ? "文本" : type == "element" ? "元素" : "";
            tr += '<td  class="center">' + type_ + '</td>';
            if (type == "element") {
                tr += '<td class="center">' + (view["isParameter"] ? ('<em  style="color:red;font-style: normal;">参数化：</em>' + view["value"]) : view["elementName"]) + '</td>';
            } else {
                tr += '<td class="center">' + (view["isParameter"] ? ('<em  style="color:red;font-style: normal;">参数化：</em>' + view["value"]) : view["value"]) + '</td>';
            }
            tr += '<td class="center">';
            tr += '<a class="pointer" data-index="' + index + '" data-value=\'' + JSON.stringify(view) + '\'+ data-toggle="modal" onclick="setValue(this)">设置参数值</a>';
            tr += '</td>';
            tr += '<td class = "data" style="display:none">';
            tr += $(divs[i]).attr("data");
            tr += '</td>';
            tr += '</tr>';
        }
        $("#keyword-value").find("tr").remove();
        $("#keyword-value").append(tr);
        $("#addBuzhou").modal("show");
    }

    function settingParameter(index) {
        var a = $("#keyword-value tr td a[data-index='" + index + "']");
        var data_value = JSON.parse(a.attr("data-value"));
        var type = data_value["type"];
        var type_ = type == "string" ? "文本" : type == "element" ? "元素" : "";
        var isParameter = (($('.radio input[name="valueType"]:checked ').val()) == "parameter");
        var data = {}, elementName, pageId;
        data["isParameter"] = isParameter;
        data["type"] = type;
        data["key"] = data_value["key"];
        var value_ = '';
        var viewValue = '';
        if (isParameter) {
            data["value"] = $("#parameterType div input").val();
            value_ = '<em  style="color:red;font-style: normal;">参数化：</em>' + data["value"]
            viewValue = data["value"];
        } else {
            if (type == "string") {
                data["value"] = $("#stringValue").val();
                value_ = data["value"];
                viewValue = value_;
            } else {
                pageId = $("#page option:selected").val();
                elementName = $("#elementValue option:selected").text();
                data["value"] = $("#elementValue option:selected").val();
                value_ = elementName;
                viewValue = data["value"]
            }
        }
        var view = jQuery.extend({}, data);
        view["value"] = viewValue;
        view["key"] = data_value["key"];
        view["type"] = type;
        view["isParameter"] = isParameter;
        view["elementName"] = elementName;
        view["pageId"] = pageId;
        var tds = '';
        tds += '<td class="center">' + index + '</td>';
        tds += '<td class="center">' + view["key"] + '</td>';
        tds += '<td  class="center">' + type_ + '</td>';
        tds += '<td class="center">' + value_ + '</td>';
        tds += '<td class="center">';
        tds += '<a class="pointer" data-index="' + index + '" data-value=\'' + JSON.stringify(view) + '\'+ data-toggle="modal" onclick="setValue(this)">设置参数值</a>';
        tds += '</td>';
        tds += '<td class = "data" style="display:none">';
        tds += JSON.stringify(data);
        tds += '</td>';
        var tr = a.parent().parent();
        tr.find("td").remove();
        tr.append(tds);
        $("#setCanshu").modal("hide");
        $("#addBuzhou").modal("show");
    }

    function setValue(obj) {
        $("#saveParameterMessage").html("");
        $("#stringValue").val("");
        $("#parameterValue").val("");
        $("#elementValue").val("0");
        $("#addBuzhou").modal("hide");
        $("#setCanshu").modal("show");
        var index = $(obj).attr("data-index");
        $("#saveParameter").attr("onclick", "settingParameter(" + index + ")");
        var data = JSON.parse($(obj).attr("data-value"));
        var type = data["type"];
        var value = data["value"];
        $("#optionsCanshu1").attr("onclick", "canshu_select(1,'" + type + "')");
        $("#optionsCanshu2").attr("onclick", "canshu_select(2,'" + type + "')");
        if (data["isParameter"]) {
            canshu_select(2, type);
            $("input:radio[value='parameter']").prop('checked', true);
            $("#parameterValue").val(value);
        } else {
            canshu_select(1, type);
            $("input:radio[value='value']").prop('checked', true);
            if (type == "string") {
                $("#elementType").hide();
                $("#stringValue").val(value);
                $("#stringType").show();
            } else if (type == "element") {
                $("#stringType").hide();
                $("#page").val(data["pageId"]);
                $("#elementValue").find("option").remove();
                $("#elementValue").append("<option value='0'>选择元素</option>");
                $.ajax({
                    url: '/api/v1/element?p=1',
                    type: 'post',
                    dataType: 'json',
                    data: JSON.stringify({"pageId": data["pageId"], "pageSize": 9999999}),
                    success: function (res) {
                        if (res.code == 200) {
                            for (var i = 0; i < res.data.elements.length; i++) {
                                if (("" + res.data.elements[i].id) == data["value"]) {
                                    $("#elementValue").append('<option selected="selected" value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                                } else {
                                    $("#elementValue").append('<option value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                                }
                            }
                        }
                    }
                });
                $("#elementType").show();
            }
        }
    }

    function cancelSaveStep() {
        $("#addBuzhou").modal("hide");
        $("#addTestCaseMessage").modal("hide");
        $(".modal-backdrop.in").remove();
    }

    function cancelSaveParameter() {
        $("#addBuzhou").modal("show");
        $("#setCanshu").modal("hide");
    }

    function gotoAddStep() {
        $("#myModalLabel2").html("添加步骤");
        $("#step-keyword").val("0");
        $("#keyword-value").find("tr").remove();
        $("#saveStep").attr("onclick", "addStep()");
        $("#addBuzhou").modal("show");
    }

    function delStep(obj) {
        $(obj).parent().parent().remove();
        var trs = $("#steps").find("tr");
        for (var i = 0; i < trs.length; i++) {
            var tr = $(trs[i]);
            var index = i + 1;
            tr.find("td:first").html(index);
            tr.find("td a[data-index]").attr("data-index", index);
        }
    }

</script>

</body>

</html>